<template>
  <div id="departureAdd">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="手动办理" name="1"></el-tab-pane>
      <el-tab-pane label="审批办理" name="2"></el-tab-pane>
    </el-tabs>
    <div class="area area1" v-if="activeName == '1'">
      <div class="form">
        <div class="formHeader">
          <h2>{{ info.name }}</h2>
          <div class="info">
            <span>员工状态: {{ info.regularStateName }}</span>
            <span>员工类型: {{ info.registertypeName }}</span>
          </div>
        </div>
        <div class="formbody">
          <el-form :model="form" label-position="right" :inline="true" :rules="rules" ref="ruleForm" class="demo-form-inline">
            <el-form-item class="block">
              <div class="tips">
                <el-divider direction="vertical"></el-divider>
                职位信息
              </div>
            </el-form-item>
            <el-form-item class="lineform">
              <el-form-item label="原部门:" label-width="87px">
                <div class="oldData">{{ info.departmentName }}</div>
              </el-form-item>
              <el-form-item label="原岗位:" label-width="87px">
                <div class="oldData">{{ info.postCodeName }}</div>
              </el-form-item>
            </el-form-item>
            <el-form-item class="lineform">
              <el-form-item label="原职位:" label-width="87px">
                <div class="oldData">{{ info.positionName }}</div>
              </el-form-item>
              <el-form-item label="原职级:" label-width="87px">
                <div class="oldData">{{ info.positionlevelname }}</div>
              </el-form-item>
            </el-form-item>
            <el-form-item class="block">
              <div class="tips">
                <el-divider direction="vertical"></el-divider>
                离职信息
              </div>
            </el-form-item>
            <el-form-item label="申请日期" prop="leaveDate">
              <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="选择日期" v-model="form.leaveDate" style="width: 100%"></el-date-picker>
            </el-form-item>
            <el-form-item label="离职日期" prop="plannedLeaveDate">
              <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="选择日期" v-model="form.plannedLeaveDate" style="width: 100%"></el-date-picker>
            </el-form-item>
            <el-form-item label="离职原因" prop="leaveReasons" class="block">
              <el-select v-model="form.leaveReasons" clearable :placeholder="OptionsData.PM_levaeReasons ? '请选择离职原因' : '--'">
                <el-option v-for="(option, index) in OptionsData.PM_levaeReasons" :label="option.value" :value="option.key + ''" :key="index"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="block">
              <div class="tips">
                <el-divider direction="vertical"></el-divider>
                备注
              </div>
            </el-form-item>
            <el-form-item class="block" label="备注" prop="remark">
              <el-input type="textarea" v-model="form.remark" resize="none" :autosize="{ minRows: 2, maxRows: 6 }"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <div class="area area2" v-if="activeName == '2'">
      <approvePerson :handleType="'departure'" :employee-id="info.userId"></approvePerson>
    </div>
    <div class="footer" v-if="activeName == '1'">
      <el-button type="default" @click="back" :loading="loading">取消</el-button>
      <el-button type="primary" @click="saveform" :loading="loading">保存</el-button>
    </div>
  </div>
</template>

<script>
import approvePerson from "../approvePerson.vue";
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState({
      tagCurrent: (state) => state.tag.tagCurrent,
    }),
  },
  components: { approvePerson },
  data() {
    return {
      activeName: "1",
      form: {
        employeeId: "",
        leaveDate: null,
        leaveReasons: "",
        plannedLeaveDate: null,
        remark: "",
      },
      info: {},
      loading: false,
      OptionsData: {},
      rules: {
        leaveDate: [{ required: true, message: "请输入申请日期" }],
        plannedLeaveDate: [{ required: true, message: "请输入离职日期" }],
      },
    };
  },
  created() {
    this.getBaseInfo();
    let userId = this.$route.query.userId;
    if (!userId) {
      this.$message.warning("数据异常,请稍后重试");
      setTimeout(() => {
        this.$store.commit("DEL_TAG", this.tagCurrent);
        this.$router.back();
      }, 1000);
      return;
    }
    this.form.employeeId = userId;
  },
  mounted() {
    this.getUserDetail();
  },
  methods: {
    async getBaseInfo() {
      const {
        data: { data: PM_levaeReasons },
      } = await this.$api.optionsManage.GetEnumDataOptiont({ metaTypeCode: "PM_levaeReasons" });
      this.OptionsData = { PM_levaeReasons };
    },
    back() {
      this.$router.back();
    },
    getUserDetail() {
      this.$api.personChange.GetExamineApproveEmployeeInfo({ employeeId: this.form.employeeId }).then((res) => {
        let data = res.data.data;
        this.info = {
          name: data.name,
          registertypeName: data.registertypeName,
          regularStateName: data.regularStateName,
          departmentName: data.departmentName,
          postCodeName: data.postCodeName ? data.postCodeName : "--",
          positionName: data.positionName ? data.positionName : "--",
          positionlevelname: data.positionlevelname ? data.positionlevelname : "--",
          userId: data.userId,
        };
      });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    saveform() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          let formData = JSON.parse(JSON.stringify(this.form));
          this.$api.personChange.InsertEmployeeLeave(formData).then((res) => {
            this.loading = false;
            console.log(res, "res");
            if (res.data.status == 200) {
              this.$message.success("办理成功");
              this.$store.commit("DEL_TAG", this.tagCurrent);
              this.$router.back();
            }
          });
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
#departureAdd {
  .area {
    width: 100%;
    height: 85%;
  }
  .area1 {
    display: flex;
    justify-content: center;
    .form {
      width: 60%;
      height: 100%;
      .oldData {
        width: 140px;
      }
      .formHeader {
        width: 100%;
        height: 100px;
        background-image: url("../../../../assets/images/personnel/person_bg1.jpg");
        background-repeat: no-repeat; //不重复
        background-size: 100% 100%; // 满屏
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: center;
        h2 {
          font-weight: 600;
        }
        .info {
          margin-top: 10px;
          display: flex;
          justify-content: space-between;
          width: 50%;
        }
      }
      .formbody {
        .el-form {
          .block {
            display: block;
            .tips {
              display: flex;
              align-items: center;
              .el-divider {
                background-color: #3ba5ed;
                width: 5px;
                border-radius: 15%;
              }
            }
            :deep(.el-textarea) {
              .el-textarea__inner {
                width: 500px;
                height: 100px !important;
              }
            }
          }
          .lineform {
            display: block;
            .el-form-item__content {
              width: 100%;
            }
          }
        }
      }
    }
  }
  .footer {
    background-color: white;
    width: 97%;
    border-top: 1px solid #ebeaf8;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 0;
    padding: 16px 0;
    .el-button {
      height: 35px;
      width: 100px;
    }
  }

  :deep(.el-drawer__wrapper) {
    .el-drawer__body {
      position: relative;
    }
    position: absolute;
    .el-drawer__header {
      background-color: #f4f9fd;
      padding: 10px 10px;
      margin-bottom: 0;
    }
    .el-form {
      padding: 10px 15px;
      .el-form-item__label {
        line-height: 20px;
        padding: 0;
      }
      .el-input__inner {
        padding: 0;
      }
      .el-radio {
        left: 0;
      }
    }
    .footer {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 100%;
      display: flex;
      justify-content: center;
      border-top: 1px solid #e5e5e5;
      padding: 10px;
    }
  }
  :deep(.v-modal) {
    position: absolute;
  }
}
</style>
